<script setup lang="ts">
import {CSSProperties} from 'vue'
import imgUrl from '@/assets/image/book.png'
import useConfig from '@/store/config'
import {BASE_TITLE} from '@/store/config'
const config = useConfig.setup().store

const logoStyle = () => {
  const style:CSSProperties = {}
  style.left = config.layout.menuCollapse ? 0 : '16px'
  return style
}

const titleStyle = () => {
  const style:CSSProperties = {}
  style.left = config.layout.menuCollapse ? 0 : '80px'
  return style
}
</script>

<template>
  <div class="layout-logo">
    <img class="logo-img" :src="imgUrl" alt="logo" :style="logoStyle()">
    <div v-show="!config.layout.menuCollapse" class="d-common-title-third website-name" :style="titleStyle()">
      {{ BASE_TITLE }}
    </div>
  </div>
</template>

<style scoped lang="less">
.layout-logo {
  width: 100%;
  // background-color: var(--theme-color);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 15px 20px;
  background: linear-gradient(180deg, #5EBEC3 0%, var(--theme-color) 100%);
}
.logo-img {
  position: absolute;
  width: 60px;
  // background-color: linear-gradient(180deg, #5EBEC3 0%, var(--theme-color) 100%);
  background-color: rgb(33, 150, 156);
}
.website-name {
  position: absolute;
  font-size: 18px;
  padding-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--d-color-white);
  transition:all 0.3s ease;
}
</style>
